<template>
  <div>
    <div id="app">
      <div class="add">
        编号:<input type="text" v-model="id" /> 品牌名称:<input
          type="text"
          v-model="name"
          @keyup.enter="add"
        />
        <input type="button" value="添加" @click="add" />
      </div>
      <div class="add">
        品牌名称:<input type="text" placeholder="请输入搜索条件" />
      </div>
      <div>
        <table class="tb">
          <tbody>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创立时间</th>
              <th>操作</th>
            </tr>
            <tr v-for="(value, index) in list" :key="index">
              <td>{{ value.id }}</td>
              <td>{{ value.name }}</td>
              <!-- 记得调用 (全局过滤或局部过滤器)-->
              <td>{{ value.time | dateForm }}</td>
              <td>
                <a href="#" @click="del(index)">删除</a>
                <!-- 别忘了传参(index) -->
              </td>
            </tr>
            <tr v-if="list.length == 0">
              <td colspan="4">没有任何数据,请先添加</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
//引入全局过滤器函数
import { dateForm } from "@/utils/myfilters.js";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          name: "BMW",
          time: new Date(),
        },
        {
          id: 2,
          name: "BYD",
          time: new Date(),
        },
        {
          id: 3,
          name: "奥迪",
          time: new Date(),
        },
      ],
    };
  },
  methods: {
    add() {
      let newobj = { id: this.id, name: this.name, time: new Date() };
      this.list.push(newobj);
    },
    del(index) {
      // splice(规定添加/删除项目的位置, 要删除的项目数量, 向数组添加的新项目。) 方法向/从数组中添加/删除项目，然后返回被删除的项目。
      // arr.splice(2,0,"William")增加
      this.list.splice(index, 1);
    },
  },
  //局部
  filters: {
    //全局过滤器
    dateForm,
  },
};
</script>

<style lang="less" scoped>
#app {
  width: 600px;
  margin: 10px auto;
}

.tb {
  border-collapse: collapse;
  width: 100%;
}

.tb th {
  background-color: #0094ff;
  color: white;
}

.tb td,
.tb th {
  padding: 5px;
  border: 1px solid black;
  text-align: center;
}

.add {
  padding: 5px;
  border: 1px solid black;
  margin-bottom: 10px;
}
</style>